<template>
  <view class="make_present">
    <view class="make_title">
      <text>可转赠金额（元）</text>
      <text class="price">{{ price }}</text>
    </view>
    <i-card top="20rpx">
      <i-tab :list="markList" v-model="activeIndex" :isScroll="false"></i-tab>
      <i-formItem
        border="none"
        align="top"
        title="转赠账号"
        :lBlod="true"
        v-if="activeIndex === 0"
      >
        <input
          v-model="formData.mobile"
          type="text"
          placeholder="请输入转赠账号"
        />
      </i-formItem>
      <i-formItem border="none" align="top" title="转赠ID" :lBlod="true" v-else>
        <input
          v-model="formData.mobile"
          type="text"
          placeholder="请输入转赠人ID"
        />
      </i-formItem>
      <i-formItem border="none" align="top" title="验证码" :lBlod="true">
        <i-verification
          v-model="formData.smsCode"
          :mobile="formData.mobile"
          color="#FF9400"
          border="none"
          padding="0"
          type="mark_present"
          :title="false"
        >
        </i-verification>
      </i-formItem>
      <i-formItem border="none" align="top" title="转赠金额" :lBlod="true">
        <view style="display: flex; align-items: center">
          <text style="margin-right: 8rpx">￥</text>
          <input
            v-model="formData.giveAccountAmount"
            type="number"
            placeholder="请输入转赠金额"
          />
        </view>
      </i-formItem>
      <!-- <view class="explain_text"> 转赠手续费 5% </view> -->

      <view class="bottoms">
        <i-buttons
          color="#fff"
          bgColor="linear-gradient( 90deg, #FFB413 0%, #FF9A00 100%)"
          radius="48rpx"
          padding="18rpx 0"
          size="32rpx"
          @click="confrim"
        >
          确认转赠</i-buttons
        >
      </view>
    </i-card>
  </view>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { createTransferOrder, createTeamTransferOrder } from "../../api/index";
import { phoneReg } from "../../utils/regs";
import { showTost, clearForm } from "../../utils/common";
import useStore from "../../stores/index";

const store = useStore();
const price = computed(() => {
  return store.userInfo?.transferAmount || 0;
});
const activeIndex = ref(0);
const markList = [
  {
    title: "普通转赠",
    value: 0,
  },
  {
    title: "团队转赠",
    value: 1,
  },
];

const formData = reactive<{
  giveAccountAmount: string;
  mobile: string;
  smsCode: string;
}>({
  giveAccountAmount: "",
  mobile: "",
  smsCode: "",
});
const confrim = async () => {
  if (!formData.giveAccountAmount) {
    showTost("请输入转赠金额");
    return;
  }

  if (!Number.isInteger(Number(formData.giveAccountAmount))) {
    showTost("转赠金额必须为整数");
    return;
  }
  if (Number(formData.giveAccountAmount) > Number(price.value)) {
    showTost("转赠金额不能大于可转赠金额");
    return;
  }
  if (!formData.smsCode) {
    showTost("请输入验证码");
    return;
  }

  if (!formData.mobile) {
    showTost(activeIndex.value === 0 ? "请输入转赠账号" : "请输入转赠人ID");
    return;
  }

  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  if (activeIndex.value === 0) {
    await createTransferOrder({
      giveAccountAmount: formData.giveAccountAmount,
      mobile: formData.mobile,
      smsCode: Number(formData.smsCode),
    });
  } else {
    await createTeamTransferOrder({
      giveAccountAmount: formData.giveAccountAmount,
      userBusinessId: formData.mobile,
      smsCode: Number(formData.smsCode),
    });
  }
  uni.hideLoading();
  showTost("转赠成功！", async () => {
   await store.setUserInfo();
    uni.navigateBack();
  });
};
</script>

<style lang="scss" scoped>
.make_present {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url("../../static/images/zz_bg.png") no-repeat center;
  background-position: 100% 360rpx;
  background-position: top;
  background-color: #f5f5f5;

  .make_title {
    width: calc(100% - 48rpx);
    margin: 60rpx auto;
    @include flexC;
    text {
      margin-left: 16rpx;
      font-weight: 400;
      color: #fff;
    }

    .price {
      @include dprice(32px);
      color: #fff;
      margin-top: 16rpx;
    }
  }

  .explain_text {
    @include dfont(26rpx);
    color: #a0a0ad;
    margin-top: 20rpx;
  }

  .bottoms {
    margin-top: 40rpx;
    padding: 0 12rpx;
  }
}

input {
  font-size: 32rpx;
  padding: 12rpx 0;
}
</style>
